<template>
  <div class="password-login">
    <div>
      <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
        <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
      </svg>
    </div>
    <div class="password-login-he">
      <h1>账号密码登录</h1>
    </div>
    <div class="password-login-input" :model="form">
      <van-form id="loginFrom" validate-first>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field v-model="form.loginName" name="pattern" placeholder="请输入手机号" :rules="[{ pattern, message: '请输入正确手机号' }]"/>
        <!-- 通过 validator 进行函数校验 -->
        <van-field v-model="form.password" type="password" name="validator" placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码' }]"/>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit" @click="login">登录</van-button>
        </div>
      </van-form>
    </div>
    <div align="left" style="padding:0 1rem">
      <router-link style="color: dodgerblue;font-size: 0.7rem" :to="{path:'/login_index'}">验证码登录</router-link>
      <div style="float: right;">
        <!--          <img src="@/image/wv.jpg" style="width: 1rem;height: 1rem;display: inline-block">-->
        <router-link style="display: inline-block;color: black;font-size: 0.7rem" :to="{path:'/retrieve_password'}">忘记密码</router-link>
      </div>
    </div>
  </div>
</template>

<script>

  import { loginPassword } from "@/api/login.js";
  import { Toast } from "vant";
  import local from '@/utils/localStorage.js';

  export default {
    name: "password_login",
    data(){
      return{
        tel: "",
        password: "",
        pattern: /^1[35789]\d{9}$/,
        // 表单参数
        form: {},
      }
    },
    created() {
      this.rest();
    },
    methods: {
      toBack(){
        this.$router.go(-1);//返回上一层
      },
      rest(){
        this.form = {
          loginName: null,
          password: null,
        };
      },
      login() {
        loginPassword(this.form).then((res) => {
          if(res.data.code == 200){
            Toast({
              message: "登陆成功",
              position: "top"
            });
            // 存储token
            local.set('token',res.data.token,1000*60*60*24*25);
            // setToken(res.data.token);
            // 跳转到首页
            this.$router.push({path:"/"});
          }else if(res.data.code == 202){
            Toast({
              message: res.data.msg,
              position: "top"
            });
          }else if(res.data.code == 203){
            Toast({
              message: res.data.msg,
              position: "top"
            });
          }else{
            Toast({
              message: "发生错误,请联系管理员",
              position: "top"
            });
          }
        });
      },
    },
  }
</script>

<style scoped>
  .password-login{
    color: black;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  .password-login-he{
    font-size: 1.5rem;
    padding: 1rem;
    text-align: left;
    margin-top: 30%;
  }
  .password-login-input{
    padding: 1rem;
  }
  .password-login-input .input{
    border-left: 1px solid #ccc;
    background-color: #ebedf0;
    margin: 0.8rem 0;
  }
</style>
